<!-- store-record -->
<template>
    <div class="main-content">
        <page-header></page-header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row :gutter="100">
                <el-col :span="10">
                <!--  yyyy-MM-dd HH:mm:ss -->
                    <el-form-item label="日期">
                        <el-date-picker
                            @change="changeDate"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            v-model="formInline.timeInterval"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <!-- 1 出库中 2 已入库 -->
                    <el-form-item label="状态">
                        <el-select 
                        @change="changeStore"
                        clearable 
                        v-model="formInline.state"
                        placeholder="请选择状态">
                            <el-option label="出库中" value="1"></el-option>
                            <el-option label="已入库" value="2"></el-option>
                            <el-option label="异常" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="类别">
                        <el-select 
                        @change="changeCat"
                        clearable 
                        v-model="formInline.cat" 
                        placeholder="请选择类别">
                            <el-option 
                            v-for="cat in outstoreTypes" 
                            :key="cat.id"
                            :label="cat.typeName" 
                            :value="cat.typeName"></el-option>
                        </el-select> 
                    </el-form-item>
                </el-col>
            </el-row>
            
        </el-form>
        <div class="table-wrapper">
            <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :data="tableData"
            height="100%"
            border
            style="width: 100%">

                <el-table-column
                label="序号"
                type="index"
                align="center"
                width="110">
                </el-table-column>

                <el-table-column
                prop="outUser"
                label="出库人"
                align="center"
                width="150">
                </el-table-column>

                <el-table-column
                prop="inUser"
                label="入库人"
                align="center"
                width="150">
                </el-table-column>

                <el-table-column
                label="时间"
                align="center">
                    <template slot-scope="scope">
                        {{scope.row.outTime ? scope.row.outTime : '--'}} ——— {{scope.row.inTime ? scope.row.inTime : '--'}}
                    </template>    
                </el-table-column>
                <!-- 1 出库中 2 已入库 -->
                <el-table-column
                prop="dataStatus"
                label="状态"
                align="center"
                width="160">
                    <template slot-scope="scope">
                        <span 
                        :style="getStyle(scope.row.dataStatus)">{{status[scope.row.dataStatus - 1]}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                label="操作"
                width="380">
                    <template slot-scope="scope">
                        <div @click="handleEdit(scope.row)" title="编辑" class="div-btn"></div>
                        <div @click="handleView(scope.row)" title="查看" class="div-btn"></div>
                        <div @click="handleBack(scope.row)" title="补还" class="div-btn"></div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="totalNum">
        </el-pagination>

        <!-- 对话框 -->
        <el-dialog 
        class="sp-dialog"
        width="84%"
        :title="dialogTitle" 
        :close-on-click-modal="false"
        :visible.sync="dialogFormVisible">
            <!-- 编辑就是一个备注 -->
            <el-input 
            placeholder="请输入备注信息"
            type="textarea" 
            v-if="dialogTitle == '编辑'" 
            v-model="editInfo"></el-input>
            <!-- 查看就是一对比出库入库记录 -->
            <div v-if="dialogTitle == '查看'"  class="view">
                <div  class="item left">
                    <c-table 
                    headTitle="出库"
                    :showCompare="true"
                    :tableParas="tableParas1"
                    :tableData="tableData1"></c-table>
                </div>
                <div  class="item right">
                    <c-table
                    headTitle="入库"
                    :tableParas="tableParas2"
                    :tableData="tableData2"></c-table>
                </div>
            </div>

            <div v-if="dialogTitle == '编辑'" slot="footer" class="dialog-footer">
                <el-button 
                type="primary"
                :loading="submitLoading"
                @click="submitEdit">
                确 定
                </el-button>

                <el-button 
                @click="closeDialog">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getInoutList,
    submitMark
} from '@/apis';
import {
    getOutStoreType
} from '@/mixins'
export default {
    name: 'store-record',
    mixins: [getOutStoreType],
    components: {
        'page-header': () => import('@/components/page-header'),
        'c-table': () => import('@/components/c-table'),
    },
    data () {
        this.status = ['出库中', '已入库', '异常'];
        // 字段 工具 型号 时间 人员 
        this.tableParas1 = [{
            label: '工具',
            prop: 'toolName'

        },{
            label: '型号',
            prop: 'toolSpec'
        },{
            label: '状态',
            prop: 'inoutType'
        }, {
            label: '时间',
            prop: 'operateTime'
        }, {
            label: '出借人员',
            prop: 'operateUser'
        }];

        this.tableParas2 = [{
            label: '工具',
            prop: 'toolName'

        },{
            label: '型号',
            prop: 'toolSpec'
        },{
            label: '状态',
            prop: 'inoutType'
        },{
            label: '时间',
            prop: 'operateTime'
        }, {
            label: '归还人员',
            prop: 'operateUser'
        }];
        return {
            // dailog提交loading
            submitLoading: false,
            // 搜索筛选条件
            formInline: {
                timeInterval: [],
                state: null,
                cat: null
            },
            // 表格数据
            tableData: [], 
            // table - loading
            loading: false,
            // 页码
            currentPage: 1,
            // 每页显示数量
            pageSize: 10,
            // 列表总数量
            totalNum: 400,
            // 对话框标题
            dialogTitle: '',
            // 对话框是否显示
            dialogFormVisible: false,
            // 编辑备注
            editInfo: '',
            // 出库表格数据
            tableData1: [],
            // 入库表格数据
            tableData2: [],
            // 提交备注的id
            itemId: null,
            
        }
    },
    methods: {
        // 不同状态不同颜色
        getStateClass (inoutType) {
            let className;
            if (inoutType == 0) {
                className = 'outing'
            } else if (inoutType == 1) {
                className = 'in-stored'
            } else if (inoutType == 2) {
                className = 'in-error'
            }
            return className;
        },

        // 获取出入库列表
        async getInOutList () {
            try {
                this.loading = true;
                let deptId = window.localStorage.getItem('organizationId');
                let params = {
                    pageNo: this.currentPage, // 当前页码
                    pageSize: this.pageSize, // pageSize
                    deptId, // 工区ID 99
                    outStartTime: this.formInline.timeInterval[0] ? this.formInline.timeInterval[0] : null, // 出库开始日期 yyyy-MM-dd HH:mm:ss
                    outEndTime: this.formInline.timeInterval[1] ? this.formInline.timeInterval[1] : null, // 出库结束日期 yyyy-MM-dd HH:mm:ss
                    jobTypeName: null, // 作业模板类别（取类别列表的 typeName）
                    dataStatus: this.formInline.state, // 出入库状态 1 出库中 2 已入库
                }
                let res = await getInoutList(params);
                console.log('获取出入库列表', res);
                let {
                    code,
                    msg,
                    data,
                    total
                } = res.data;
                if (code == 200) {
                    this.loading = false;
                    this.tableData = data;
                    this.totalNum = total;
                    
                } else if (code == -2) {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    })
                    this.$store.commit('CLEAR_LOGIN');
                    this.$router.push('/login').catch({});  
                    this.loading = false;  
                } else {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    });
                    this.loading = false;
                }
            } catch(e) {
                this.loading = false;
                console.log('获取出入库列表',e)
            }
        },

        // 选择每页显示多少条
        handleSizeChange (val) {
            //console.log('page', val);
            this.pageSize = val;
            this.getInOutList();
        },

        // 选择页码改变
        handleCurrentChange (val) {
            //console.log('page', val);
            this.currentPage = val;
            this.getInOutList();
        },

        //  时间选择变化
        changeDate () {
            this.getInOutList();
        },

        // 出库状态变化
        changeStore () {
            this.getInOutList();
        },

        // 类别变化
        changeCat () {
            this.getInOutList();
        }, 

        // 编辑功能
        handleEdit (row) {
            this.dialogTitle = '编辑';
            this.dialogFormVisible = true;
            this.itemId = row.id;
        }, 

        // 查看功能
        handleView (row) {
            this.dialogTitle = '查看';
            this.dialogFormVisible = true;
            let outTools = row.outTools ? row.outTools : [];
            let inTools = row.inTools ? row.inTools : [];
            // 这里需要对比两边
            let idList = inTools.map(item => {
                let _item;
                if (item.toolCode) {
                    _item = item.toolCode
                } else {
                    _item = 0
                }
                return _item
            });
            this.tableData1 = outTools.map(item => {
                let _item;
                if (idList.includes(item.toolCode)) {
                    _item = {
                        ...item,
                        compare: 0
                    }
                } else {
                    _item = item;
                }

                return _item
            })

            this.tableData2 = inTools;
        },

        // 补还功能
        handleBack (row) {
            /* id:"BE6CBB47726346BBB0B4C30F3FD63D21"
            inTime:"2021-10-11 10:27:11"
            inTools:Array[2]
            inUser:"刘正"
            jobTypeName:"一级修"
            operateDept:99
            outTime:"2021-10-11 10:26:17"
            outTools:Array[4]
            outUser:"刘正" */

            let inTools = row.inTools ? row.inTools : [];
            let outTools = row.outTools ? row.outTools : [];
            let id = row.id;
            let inUser = row.inUser;
            let jobTypeName = row.jobTypeName;
            let operateDept = row.operateDept;
            let inToolStr = JSON.stringify(inTools);
            let outToolStr = JSON.stringify(outTools);
            sessionStorage.setItem('buhuan', inToolStr);
            sessionStorage.setItem('buhuan_out', outToolStr);
            this.$router.push(`/in-store?id=${id}&inUser=${inUser}&jobTypeName=${jobTypeName}&operateDept=${operateDept}`).catch({})
        },

        // 异常情况显示不同颜色
        getStyle (s) {
            let styles;
            let inoutType = s -1;
            if (inoutType == 0) {
                styles = {color: '#2683ff'}
            } else if (inoutType == 1) {
                styles = {color: '#2ed3c0'}
            } else if (inoutType == 2) {
                styles = {color: '#ff802f'}
            }
            return styles
        },

        // 提交备注表单
        async submitEdit () {
            let recordVo = {
                "dataRemark": this.editInfo,
                "id": this.itemId,
            };
            if (!this.editInfo) {
                this.$message({
                    type: 'error',
                    message: '备注为空！'
                })
                return;
            }
            this.submitLoading = true;
            try {
                let res = await submitMark(recordVo);
                console.log('提交备注表单', res);
                let {
                    code,
                    msg,
                    data
                } = res.data;
                if (code == 200) {
                    this.submitLoading = false;
                    this.$message({
                        type: 'success',
                        message: `${msg}`
                    })
                    this.closeDialog();
                } else if (code == -2) {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    })
                    this.$store.commit('CLEAR_LOGIN');
                    this.$router.push('/login').catch({});  
                    this.submitLoading = false;  
                } else {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    });
                    this.submitLoading = false;
                }
            } catch (e) {
                this.submitLoading = false;
            }
        },

        // 关闭弹窗
        closeDialog () {
            this.editInfo = null;
            this.dialogFormVisible = false;
        }

    },
    created () {
        this.getInOutList();
        this.getOutTypes();
    }
}
</script>
<style lang='scss'>
.table-wrapper {
    width: 100%;
    height: calc(100% - 232px); /*182*/
    padding: 10px 0;
    box-sizing: border-box;

    .el-table .cell {
        position: relative;
    }

    .div-btn {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .3);
        position: absolute;
        margin-left: -27px;
        cursor: pointer;
        background-size: 100% 100%;

        &:first-child {
            left: 25%;
            background: url('../../assets/edit.png') no-repeat center center; 
        }

        &:nth-child(2) {
            left: 50%;
            background: url('../../assets/details.png') no-repeat center center;
        }

        &:last-child {
            left: 75%;
            background: url('../../assets/buhuan.png') no-repeat center center;
        }
    }    
}   
.el-pagination__total {
    font-size: 20px!important;
    color: #fff;
}

.el-pagination button, .el-pager li {
    padding: 0 15px;
}

.sp-dialog {
    .view {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .item {
            width: 50%;
            height: 100%;
            float: left;
        }

        .right {
            margin-left: -1px;
        }
    }

    .el-dialog {
        background: #2e3e61;
    }

    .el-dialog__title {
        font-size: 32px;
        line-height: 40px;
        color: #fff;
    }

    .el-dialog__headerbtn {
        font-size: 32px;
    }

    .el-textarea__inner {
        font-size: 24px;
        padding: 50px 15px;
    }

    .el-button {
        font-size: 24px;
    }
}
</style>